<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试第七题</title>
</head>
<style>
    .divOut {
        width: 550px;
        border: 1px #CBCBCB solid;
    }

    .textWb {
        width: 500px;
        height: 180px;
        margin-left: 25px;
        margin-top: 10px;

    }

    .publish {
        width: 80px;
        height: 20px;
        font-family: 宋体;
        font-weight: bold;
        border: none;
        border-radius: 3px;
        color: #FEFEFE;
        margin-left: 23px;
        background-color: #FE9800;
    }
</style>

<body>
    <div class="divOut">
        <textarea id="text" class="textWb"></textarea>
        <button id="btn" class="publish">发布</button>
    </div>
</body>
<script>
    /* 
        案例效果：实现帖子的增删，使用localStorage，实现刷新不清空的效果
     */
    //初始化
    for (let key in localStorage) {
        let inputVal = localStorage.getItem(key);
        insert(inputVal);
    }
    //点击发布执行函数
    document.getElementById('btn').addEventListener('click', function () {
        let inputVal = document.getElementById('text').value;//获取文本框的内容
        if (!inputVal.trim()) {
            alert('输入内容不能为空!');
        }
        localStorage.setItem(Date.now().toString(),inputVal);
        insert(inputVal);
    });
    //创建p标签
    function insert(inputVal) {
        let p = document.createElement('p');
        p.innerHTML = inputVal;
        let div = document.querySelector('div');
        div.appendChild(p);
    }
</script>

</html>